<!-- 聊天备份 -->
<template>
  <div class="dashboard-editor-container">
		<el-row style="background: #fff; padding: 16px 16px 0;">
      <div class="xxx" style="display:flex;">
        <div class="lefttree" style="height:calc(100vh - 86px);">
          <!-- <div class="tabclick">
            <div class="tabitem" @click="handleClick()">
              <span><i :class="tab1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
            </div>
          </div> -->
          <!-- icon-class="el-icon-arrow-right"  -->
          <el-tree 
            v-show="tab1" 
            node-key="ID" 
            :data="CustomerList" 
            :expand-on-click-node=false 
            :props="defaultProps" 
            @node-click="handleNodeClick"  
            default-expand-all	
            highlight-current
            style="width:200px;">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <svg-icon v-show="node.level === 1" icon-class="peoples" style="margin-right: 10px;"/>
                <svg-icon v-show="node.level === 2" icon-class="user" style="margin-right: 10px;"/>
                  <span class="tree-text">{{ `${node.label}` }}<span v-show="node.level > 1">（{{ data.Num }}）</span></span>
              </span>
            </span>
          </el-tree>
        </div>
        <div style="width:calc(100% - 240px)">
          <connsearch ref="connsearch" :formOptions="formOptions"   @search="search" @reset="reset"/>
          <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }" style="padding-right: 8px;margin: 16px 0;">
            <!-- <span class="title">聊天备份列表</span> -->
            <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px">
              <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
              <el-table-column label="终端用户" prop="choseName" align="left">
                <template slot-scope="scope">
                  <div class="name">{{ scope.row.choseName }}{{ scope.row.Department }}</div>
                </template>
              </el-table-column>
              <el-table-column label="记录日期" prop="Name" align="left" show-overflow-tooltip></el-table-column>
              <el-table-column label="抓取次数" prop="Count" align="left" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" align="left" width="80px" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="changeMailGlobal(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination 
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" 
              :current-page=pageNum
              :page-size=pageSize
              background 
              layout="total, prev, pager, sizes, next, jumper"
              :total="total">
            </el-pagination>
          </el-col>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import { getNowDay, parseTime, getTreeData, ParamDictURLtype, Maintype } from '@/utils/index.js';
import { connrequest } from '@/api/firstPage.js';
import connsearch from "@/components/connSearch";
import barchart from "./components/barchart.vue";
import piechart from "./components/piechart.vue";
export default {
  name: 'screenRecording',
  components: { connsearch, barchart, piechart },
  directives: { elDragDialog },
  data() {
    return {
      activeName:'按日统计',
      choseName: '',
      Department: '',
      tableData:[],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tab: false,
      tab1: true,
      CustomerList:[],
      tab2: false,
      barchartData: {xAxis:[],series:[]},
      pie1Data: [],
      pie2Data: [],
      pie3Data: [],
      searchform:{},
      defaultProps:{
        children: 'children',
        label: 'label',
        Num: 'Num'
      },
      formOptions:[
        {
          col: 12,
          label: "日期",
          prop: "timeRange",
          element: "el-date-picker",
          initValue: [],
          type: ""
        },
      ]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.pageSize = Cookies.get('DefaultPageLength') * 1
    let endTime = new Date(new Date().setHours(0, 0, 0, 0))
    let startTime = endTime - (Cookies.get('DefaultLogDays') * 1 * 3600 * 24 * 1000);
    let arr = [ parseTime(startTime), '']
    this.formOptions.map( item => {
      if(item.label === '日期'){
        item.initValue = arr
      }
    })
    this.$set(this.searchform,'timeRange', arr)
    // this.getData()
    this.GetScreenLogSumByUser()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods:{
    getData(){
      this.GetScreenLogSumByDate()
    },
    async handleNodeClick(item) {
      if(item.level !== 2 ){
        return false
      }
      this.choseName = item.label
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize,
        },
        Filter: {
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Name: item.level === 2 ? item.label : undefined
        }
      }
      const res = await connrequest('GetScreenLogSumByDate', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        item.choseName = this.choseName
        return item
      })
      this.tableData = res.Data
      this.total = res?.Paging?.TotalCount || 0
    },
    async GetScreenLogSumByUser(){
      const data = {
        Filter: {
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
        }
      }
      const res = await connrequest('GetScreenLogSumByUser', data)
      res.Data = res.Data || []
      // 构建树形结构
      const tree = {};
      res.Data.forEach(item => {
        if (!tree[item.Department]) {
          tree[item.Department] = {};
        }
        if (!tree[item.Department][item.Name]) {
          tree[item.Department][item.Name] = { Num: 0 };
        }
        tree[item.Department][item.Name].Num += item.Count;
      });
      // 转换格式
      const treeData = [];
      for (const department in tree) {
        const departmentNode = {
          label: department,
          children: []
        };
        for (const name in tree[department]) {
          const nameNode = {
            label: name,
            Num: tree[department][name].Num,
            children: []
          };
          departmentNode.children.push(nameNode);
        }
        treeData.push(departmentNode);
        // 为每个节点添加层级信息
        const addLevel = (nodes, level = 1) => {
          nodes.forEach(node => {
            node.level = level;
            if (node.children) {
              addLevel(node.children, level + 1);
            }
          });
          return nodes
        }
        this.CustomerList = addLevel(treeData)
      }
    },
    // 获取屏幕录像
    async GetScreenLogSumByDate(){
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Name: this.choseName || '',
        }
      }
      const res = await connrequest('GetScreenLogSumByDate', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        item.choseName = this.choseName
        return item
      })
      this.tableData = res.Data
      this.total = res?.Paging?.TotalCount
    },
    // 查看详情
    changeMailGlobal(row){
      this.$router.push(`/logAnalysis/recordingDetails?Name=${row.choseName}&&TransTime=${row.Name}`)
    },
    handleSizeChange(val){
      this.pageNum = 1
      this.pageSize = val
      this.GetScreenLogSumByDate()
    },
    handleCurrentChange( pageNum ){
      this.pageNum = pageNum
      this.GetScreenLogSumByDate()
    },
    search(val) {
      this.pageNum = 1
      this.searchform = {...val}
      this.GetScreenLogSumByUser()
      this.getData()
    },
    reset() {
      let endTime = new Date(new Date().setHours(0, 0, 0, 0))
      let startTime = endTime - (Cookies.get('DefaultLogDays') * 1 * 3600 * 24 * 1000);
      let arr = [ parseTime(startTime), '']
      this.pageNum = 1
      this.formOptions = this.formOptions.map( item => {
        if(item.label === "日期"){
          item.initValue = arr
        }else{
          item.initValue = ""
        }
        return item
      })
      this.searchform = {}
      this.$set(this.searchform,'timeRange', arr)
      this.$refs.connsearch.addInitValue()
      this.GetScreenLogSumByUser()
      this.getData()
    },
    handleClick() {
      this.tab = !this.tab
    },
    handleClick2() {
      this.tab2 = !this.tab2
    },
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
@import "./components/css/conncss.scss";
/* 设置垂直滚动条（如果需要水平滚动条，请添加::-webkit-scrollbar-horizontal选择器） */
::-webkit-scrollbar {
    width: 3px; /* 滚动条宽度 */
  }
  /* 滚动条轨道部分（即背景） */
  ::-webkit-scrollbar-track {
    background-color: #fff; /* 背景颜色 */
  }
  /* 滚动条上下两端的按钮 */
  ::-webkit-scrollbar-button {
    display: none; /* 隐藏按钮 */
  }
  /* 滚动条滑块部分（即滑块本身） */
  ::-webkit-scrollbar-thumb {
    background-color: #ccc; /* 滑块颜色 */
  }
.lefttree{
  width: 240px;
  border: 1px solid #ebeef5;
  margin-right: 10px;
  padding: 10px;
  position: relative;
  overflow-y: auto;
  .tabclick{
    transform: rotate(-90deg);
    position: absolute;
    top: calc((100vh - 300px) / 2);
    left: -55px;
    margin-top: 20px;
  }
  ::v-deep .el-tree{
    margin-left: 20px;
    color: #676c70;
    background-color: #ffffff;
    .tree-text{
      font-size: 14px;
      display: inline-block;
      width: 130px;
      text-align: justify;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 溢出隐藏 */
      text-overflow: ellipsis; /* 超出部分用省略号表示 */
    }
    // .tree-text:before {
    //   content: "";
    //   display: inline-block;
    //   width: 100%;
    //   height: 0;
    // }

    // .tree-text:after {
    //   content: "...";
    //   display: inline-block;
    //   width: 1em;
    //   margin-left: -1em;
    // }
  }
  ::v-deep.el-tree-node__content{
  &:hover{
    background-color: #cccccc;
  }
}
  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    color: #459ffc !important;
    background-color: #f7f7f7 !important;
  }
  // ::v-deep .el-tree-node__expand-icon{
  //   position :absolute;
  //   left: 2%;
  // }
  ::v-deep .el-tree-node__label{
    padding-left: 15px;
  }
}
</style>